<template>
  <div class="clock">
    <van-cell
      v-for="clock in clockData"
      :key="clock.title"
      center
      :title="clock.title"
      :label="clock.lable"
      inset
    >
      <template #right-icon>
        <van-switch v-model="clock.checked" size="22px" @click="handletoggle(clock.id)" />
      </template>
    </van-cell>
    <van-button
      type="default"
      size="large"
      icon="plus"
      plain
      @click="show = true"
    >
      添加
    </van-button>
    <van-overlay :show="show" @click="show = false">
      <div class="wrapper" @click.stop="show = false">
        <div class="block" @click.stop>
          <!-- 可以使用 CellGroup 作为容器 -->
          <van-cell-group inset>
            <van-field
              v-model="work"
              label="任务"
              placeholder="请输入任务名"
              required
              error
            />
            <van-field
              v-model="des"
              label="描述信息"
              placeholder="请输入描述信息"
              required
              error
            />
            <van-button
              type="success"
              size="small"
              color="#f7cd2c"
              @click="addwork"
            >
              &emsp;确认&emsp;
            </van-button>
          </van-cell-group>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const clockData:any = ref<any[]>([
  {
    id: 1,
    title: '吃饭',
    lable: '饮食是关键',
    checked: false,
  },
  {
    id: 2,
    title: '排泄',
    lable: '观测便便状况',
    checked: false,
  },
  {
    id: 3,
    title: '排泄',
    lable: '观测便便状况',
    checked: false,
  },
])
// 切换状态
const handletoggle = (id: any) => {
  const newData = clockData.value.filter((item: any) => item.id === id)
  newData.checked = !newData.checked
  // console.log(newData)
  // 删除事项
  setTimeout(() => {
    clockData.value = clockData.value.filter((item: any) => item.checked === false)
  }, 1000)
}

// 显示遮罩
const show = ref(false)

// 添加任务
const work = ref('')
const des = ref('')
let id = 3
const addwork = () => {
  show.value = false
  if (work.value === '' || des.value === '') {
    return
  }
  const addData = {
    id: id += 1,
    title: work.value,
    lable: des.value,
    checked: false,
  }
  // console.log(addData)
  clockData.value = clockData.value.concat(addData)
  console.log(clockData.value)
}

</script>

<style lang="less" scoped>
.clock{
    width: 100%;
    height: 667px;
    background: #f7f7f7;
    overflow: hidden;
}
.van-cell{
    margin-top: 20px;
}
.van-button{
    margin-top: 20px;
}
 .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    width: 375px;
    height: 180px;
    background-color: #fff;
  }
  .van-button--success{
    margin-left:140px;
    margin-top: 10px;
  }
</style>
